<template>
  <div class="content_sides">
    <div class="content_side content_side__left">
      <div class="main_title_wrapper">
        <div class="main_subtitle">{{ subtitle }}</div>
        <div class="main_title">{{ title }}</div>
        <div class="title_description">
          <!-- 可以根据需要添加描述文本 -->
        </div>
        </div>
        <NextButton v-if="showNextButton" @click="$emit('next')" />
      </div>

    <div class="content_side content_side__right">
      <div class="services_tabs">
        <div class="tabs">
          <div class="inner_tabs_content">
        <!-- 标签导航 -->
            <ul class="tabs_list">
            <li
              v-for="(tab, index) in tabs"
              :key="index"
                :class="['tab_link', { active: activeTab === index }]"
              @click="selectTab(index)"
            >
                <span class="tabs_frame">{{ twoDigits(index + 1) }}</span>
                {{ tab.title }}
            </li>
          </ul>

            <!-- 标签内容 -->
            <div class="tabs_wrapper">
              <div class="content_tab">
                <div class="content_tab_side content_tab_side__left">
                  <div class="service_img_wrapper">
                    <img 
                      :src="tabs[activeTab].img" 
                      :alt="tabs[activeTab].title" 
                      class="service_img service_img__js" 
                    />
                    <img 
                      class="svg service_logo" 
                      src="@/assets/images/no_text_logo.svg" 
                      alt="logo" 
                    />
                    <div class="service_img_slide"></div>
                  </div>
        </div>
                <div class="content_tab_side content_tab_side__right">
                  <div 
                    v-for="(tab, index) in tabs" 
                 :key="index"
                    :class="['tab_content', { active: activeTab === index }]"
                  >
                    <div class="content_tab_title" v-html="tab.heading"></div>
                    <div class="content_tab_text simple_text" v-html="tab.content"></div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import gsap from 'gsap';
import NextButton from './NextButton.vue';
import s1Img from '@/assets/images/services/s1.jpg';

// 定义组件属性
defineProps<{
  subtitle: string;
  title: string;
  showNextButton?: boolean;
}>();

// 定义组件事件
defineEmits<{
  (e: 'next'): void;
}>();

// 服务选项卡数据
const tabs = [
  {
    title: "综合技术解决方案和工程",
    heading: "<p><strong>综合</strong> 技术解决方案和工程</p>",
    img: s1Img,
    content: `
      <p><strong>我公司组装、供应和调试以下设备：</strong></p>
      <ul>
        <li>接收牛奶和其他类型原材料的设备；</li>
        <li>原材料和成品流分配设备；</li>
        <li>CIP 清洗站；</li>
        <li>用于牛奶、奶油和乳清的初级加工和巴氏杀菌的设备。</li>
      </ul>
    `
  },
  {
    title: "设备、零部件和备件供应",
    heading: "<p><strong>供应</strong> 设备、零部件和备件</p>",
    img: s1Img,
    content: `
      <ul>
        <li>阀门、泵、自动化系统等流体传导设备；</li>
        <li>储罐清洗设备；</li>
        <li>分离设备；</li>
        <li>膜元件（ALFA LAVAL、KOCH）；</li>
        <li>测量设备和自动化工具（Siemens、Endress+Hauser 等）。</li>
      </ul>
    `
  },
  {
    title: "食品生产现代化",
    heading: "<p>食品生产 <strong>现代化</strong></p>",
    img: s1Img,
    content: `
      <p>我们实施的项目：</p>
      <ul>
        <li>与 MARBO 合作，对奶酪、乳制品设施进行现代化改造；</li>
        <li>使用 A-LIMA-BIS 膜技术对生产设施进行现代化改造。</li>
      </ul>
    `
  },
  {
    title: "审计与服务",
    heading: "<p><strong>审计</strong> 和服务维护</p>",
    img: s1Img,
    content: `
      <p>我们延长您的设备使用寿命，<strong>减少停机时间，并帮助优化运营成本。</strong></p>
    `
  }
];

// 当前激活的选项卡
const activeTab = ref(0);
// 动画锁，防止快速点击
const isAnimating = ref(false);

// 选择选项卡
function selectTab(index: number): void {
  if (activeTab.value === index || isAnimating.value) return;
  
  isAnimating.value = true;
  
  const slideEl = document.querySelector('.service_img_slide') as HTMLElement;
  const allContentEls = document.querySelectorAll('.tab_content');
  const currentContentEl = document.querySelector('.tab_content.active') as HTMLElement;
    
  if (!slideEl || !currentContentEl) {
      activeTab.value = index;
    isAnimating.value = false;
      return;
    }
  
  // 确保遮罩初始状态：在图片下方
  gsap.set(slideEl, { top: '100%' });
    
    // 创建动画时间线
  const tl = gsap.timeline({
    onComplete: () => {
      isAnimating.value = false;
      // 确保动画结束后遮罩回到初始位置
      gsap.set(slideEl, { top: '100%' });
    }
  });
    
  // 1. 内容淡出
  tl.to(currentContentEl, {
    opacity: 0,
    duration: 0.25,
    ease: 'power1.out'
  });
  
  // 2. 遮罩从下往上移动覆盖图片（使用更流畅的缓动）
  tl.to(slideEl, {
    top: '0%',
    duration: 0.5,
    ease: 'power3.inOut'
  }, '-=0.15'); // 与淡出重叠
  
  // 3. 在遮罩完全覆盖时切换内容
  tl.call(() => {
    // 切换激活状态
    activeTab.value = index;
    
    // 立即更新DOM显示状态
    allContentEls.forEach((el, i) => {
      if (i === index) {
        (el as HTMLElement).style.display = 'block';
        (el as HTMLElement).style.opacity = '0';
      } else {
        (el as HTMLElement).style.display = 'none';
      }
    });
    });
    
  // 4. 遮罩继续向上移动，移出图片（使用更流畅的缓动）
  tl.to(slideEl, {
    top: '-100%',
        duration: 0.5,
    ease: 'power3.inOut'
  }, '+=0.05'); // 稍微延迟
  
  // 5. 新内容淡入（与遮罩退出同时开始）
  tl.to(allContentEls[index], {
    opacity: 1,
    duration: 0.4,
    ease: 'power1.in'
  }, '-=0.4'); // 与遮罩退出同时进行
}

// 数字前补0
function twoDigits(n: { toString: () => string; }): string {
  return n.toString().padStart(2, "0");
}
</script>

<style scoped>
/* 使用全局样式中定义的服务页面样式，这里只添加必要的补充 */

/* 主标题样式 (与HomePanel保持一致) */
.main_subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main_title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

/* 内容布局 */
.content_sides {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 0;
  color: #828c9f;
  font-size: 1.4rem;
}

.content_side__left {
  width: 30%;
  min-width: 30%; /* 固定宽度，不允许变化 */
  max-width: 30%; /* 固定宽度，不允许变化 */
  padding-right: 3rem;
  flex-shrink: 0; /* 防止收缩 */
  flex-grow: 0; /* 防止扩展 */
  position: relative; /* 确保固定定位 */
}

.content_side__right {
  width: 70%;
  flex-shrink: 0; /* 防止收缩 */
}

.main_title_wrapper {
  position: relative;
  line-height: 1;
  margin-bottom: 4rem;
}

.title_description {
  color: #828c9f;
  font-size: 1.4rem;
  line-height: 1.9;
  max-width: 47rem;
}

.description_separator {
  display: inline-block;
  width: 8.7rem;
  height: 0.2rem;
  background-color: #e58707;
  margin-right: 2.5rem;
  vertical-align: middle;
}

/* Services tabs 样式 */
.services_tabs {
  width: 100%;
  padding-top: 11rem;
}

.inner_tabs_content {
  display: flex;
  flex-direction: column-reverse;
}

/* 标签列表 */
.tabs_list {
  background-color: #2b3444;
  margin-left: -14rem;
  width: calc(100% + 14rem);
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.tab_link {
  width: 100%;
  color: #657084;
  font-size: 1.2rem;
  position: relative;
  padding: 2rem 2rem 2rem 6rem;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}

.tab_link.active {
  color: #fff;
}

.tabs_frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: #e58707;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s ease-in-out;
  color: #fff;
  font-size: 1.4rem;
}

.tab_link.active .tabs_frame {
  height: 100%;
}

/* 内容区域 */
.content_tab {
  display: flex;
  align-items: center;
}

.content_tab_side {
  position: relative;
}

.content_tab_side__left {
  width: 55%; /* 图片区域更大 */
  position: relative;
  font-size: 0;
}

.service_img_wrapper {
  display: inline-block;
  position: relative;
  font-size: 0;
  overflow: hidden; /* 隐藏超出的遮罩层 */
}

.service_img {
  max-width: 100%;
  width: 100%; /* 确保图片填满容器 */
  height: auto;
  display: block;
}

.service_logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 35rem; /* 增大logo */
  height: 27rem; /* 增大logo */
  opacity: 0.8;
}

.service_img_slide {
  display: block;
  width: 100%;
  height: 100%;
  background: #232b39;
  position: absolute;
  left: 0;
  top: 100%; /* 初始位置在图片下方 */
  z-index: 2;
  /* 移除transition，让GSAP完全控制动画 */
}

.content_tab_side__right {
  width: 45%; /* 文字区域相应缩小 */
  padding: 2rem 0 2rem 6rem;
  font-size: 1.4rem;
  line-height: 2.6rem;
}

.tab_content {
  display: none;
  opacity: 0;
}

.tab_content.active {
  display: block;
  opacity: 1;
}

.content_tab_title {
  color: #fff;
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 3rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 5rem;
}

.content_tab_title::after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.2rem;
  background-color: #e58707;
  position: absolute;
  left: 0;
  top: 100%;
}

.content_tab_title strong {
  color: #e58707;
}

.simple_text {
  color: #828c9f;
}

.simple_text p {
  margin-bottom: 2.5rem;
}

.simple_text strong {
  color: #fff;
  font-weight: 600;
}

.simple_text ul {
  padding-left: 0;
  list-style: none;
}

.simple_text ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

.simple_text ul li::before {
  content: '';
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  background-color: #e58707;
  position: absolute;
  left: 0;
  top: 1.1rem;
}

.simple_text ul li:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media screen and (max-width: 1499px) {
  .tab_link {
    padding: 1rem 1rem 1rem 4rem;
}

  .content_tab_title {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

  .content_tab_side__right {
    padding-left: 3rem;
    line-height: 1.5;
}

  .simple_text p,
  .simple_text ul li:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  
  .service_logo {
    width: 20rem;
    height: 15.9rem;
}
}

@media screen and (max-width: 1199px) {
  .tab_link {
    font-size: 1rem;
  }
  
  .main_title {
    font-size: 5rem;
  }
  
  .simple_text ul li:not(:last-child) {
    margin-bottom: 1rem;
}
}

@media screen and (max-width: 1024px) {
  .content_sides {
    padding: 0 2rem;
  }
}

@media screen and (max-width: 991px) {
  .content_sides {
    flex-direction: column;
  }

  .content_side__left,
  .content_side__right {
    width: 100%;
  }
  
  .content_side__left {
    padding-right: 0;
    margin-bottom: 4rem;
}

  .tabs_list {
    width: 100%;
    margin-left: 0;
}

  .services_tabs {
    padding-top: 0;
  }
  
  .inner_tabs_content {
    flex-direction: column;
  }
  
  .tabs_wrapper:not(:first-child) {
    margin-top: 3rem;
  }
  
  .main_title_wrapper {
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .tabs_list {
    flex-wrap: wrap;
  }
  
  .tabs_list > .tab_link {
    width: 50%;
    margin-top: 1px;
    margin-bottom: 1px;
  }
  
  .content_tab_side__right {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .content_tab_title {
    line-height: normal;
  }
  
  .main_title {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 600px) {
  .content_tab_side__left {
    display: none;
  }
  
  .content_tab_side {
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  .main_title {
    font-size: 3rem;
  }
}
</style>
